<template>
  <div
    class="E-page-album"
    v-loading="load"
    element-loading-text="拼命加载中..."
    element-loading-spinner="el-icon-loading"
  >
    <el-row :gutter="15">
      <el-col :span="8" v-for="(item, index) in dataArr" :key="index">
        <div class="singer-card bg-image-cover">
          <div class="image">
            <img v-lazy="item.blurPicUrl" />
          </div>
          <div class="content">
            <p class="title text-ellipsis">{{item.name}}</p>
            <p class="text-ellipsis">
              <el-popover
                v-for="(item, index) in item.artists"
                :key="index"
                trigger="hover"
                placement="top"
                :open-delay="1000"
                popper-class="el-popover-narrow"
                v-model="item.__show_popover"
              >
                <!-- el-popover 组件不支持懒加载，通过自定义属性(__show_popover)巧妙的实现了 -->
                <E-popover-singer v-if="item.__show_popover" :id="item.id" />
                <el-tag slot="reference" size="mini" type="info">{{ item.name }}</el-tag>
              </el-popover>
            </p>
          </div>
        </div>
      </el-col>
    </el-row>
    <E-pagination @change="(p,l)=>getData(keywords,p,l)" :total="total" background />
  </div>
</template>

<script>
export default {
  props: ['keywords'],
  components: {
    'E-pagination': () => import('@/components/high-reuse/E-pagination'),
    'E-popover-singer': () => import('@/components/high-reuse/E-popover-singer')
  },
  data() {
    return {
      load: false,
      total: 0,
      dataArr: []
    };
  },
  methods: {
    getData(keywords, offset, limit) {
      this.load = true;
      this.$api.get('search', {
        keywords, offset, limit, type: 10
      }, true).then(({ result }) => {
        this.total = result.albumCount;
        this.dataArr = result.albums;
        console.log(result);
      }).finally(() => { this.load = false; });
    }
  }
};
</script>

<style lang="scss" scoped>
.E-page-album {
  & > .el-row {
    padding: 15px 15px 0 15px;
    & > .el-col {
      margin-bottom: 20px;
      .singer-card {
        position: relative;
        display: flex;
        $size: 60px;
        padding: 5px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        & > .image {
          position: relative;
          width: $size;
          height: $size;
          flex: 0 0 $size;
          &::after {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: $size + 8px;
            height: $size;
            content: "";
            background: no-repeat url("../../assets/album.png");
            background-size: 100%;
            background-position: 0;
          }
          & > img {
            object-fit: cover;
            width: 100%;
            height: 100%;
          }
        }
        & > .content {
          flex-grow: 1;
          padding: 0 20px;
          height: $size;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          & > p {
            line-height: 30px;
            padding: 0 5px;
            &.title {
              line-height: 20px;
              margin-top: 5px;
              padding: 0;
            }
            & > span {
              margin-right: 5px;
              &:last-of-type {
                margin-right: 0;
              }
            }
          }
        }
      }
    }
  }
}
</style>
